<template>
  <div id="fileGroupTree">
    <div class="index-form">
      <div class="icon"></div>
      <div class="name">文件名</div>
      <div class="date">日期</div>
      <div class="wordList">词条数</div>
      <div class="do">操作</div>
    </div>
    <div class="previousPage" v-show="currentLevel == 0 ? false : true"></div>
    <template>
      <div class="groupList">
        <div v-show="file.getChild().length > 0">
          <template v-for="(j, i) in file.getChild()">
            <div :key="i" class="form">
              <div class="icon">
                <svg
                  t="1589126741581"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3958"
                  width="22"
                  height="22"
                >
                  <path
                    d="M83.2 192h304.832L496 307.2h412.8a19.2 19.2 0 0 1 19.2 19.2V576l-153.6 384H83.2a19.2 19.2 0 0 1-19.2-19.2V211.2a19.2 19.2 0 0 1 19.2-19.2z"
                    fill="#2d5362"
                    p-id="3959"
                    data-spm-anchor-id="a313x.7781069.0.i2"
                    class=""
                  ></path>
                  <path
                    d="M250.496 460.8h746.56a19.2 19.2 0 0 1 18.112 25.472l-159.488 460.8a19.2 19.2 0 0 1-18.176 12.928H90.944a19.2 19.2 0 0 1-18.112-25.472l159.488-460.8a19.2 19.2 0 0 1 18.176-12.928z"
                    fill="#31b3e2"
                    p-id="3960"
                    data-spm-anchor-id="a313x.7781069.0.i3"
                    class=""
                  ></path>
                </svg>
              </div>
              <div class="name">{{ j.getGroupName() }}</div>
              <div class="date">{{ getDate() }}</div>
              <div></div>
              <div class="do">
                <button>删除目录</button>
                <button>进入目录</button>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="fileList">
        <div v-show="file.getFile().length > 0">
          <template v-for="(k, i) in file.getFile()">
            <div :key="i" class="form">
              <div class="icon">
                <svg
                  t="1589125458146"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="16933"
                  width="24"
                  height="24"
                >
                  <path
                    d="M722.187453 193.807548h191.76006a29.496626 29.496626 0 0 0-8.63784-19.643089L738.75931 7.614096a26.04149 26.04149 0 0 0-18.299425-7.550112h-0.191952v191.888028a1.91952 1.91952 0 0 0 1.91952 1.855536z"
                    fill="#050a0e"
                    p-id="16934"
                  ></path>
                  <path
                    d="M683.797051 206.028493V0.063984H151.194201a41.397651 41.397651 0 0 0-41.333666 41.333667v940.884778c0 22.842289 18.555361 41.333667 41.333666 41.333667h721.547614a41.333667 41.333667 0 0 0 41.333666-41.333667V230.406398h-206.028493a24.313922 24.313922 0 0 1-24.249937-24.377905z m47.540115 471.754061a16.827793 16.827793 0 0 1-16.891777 16.827793h-405.018746a16.827793 16.827793 0 0 1-16.827793-16.827793v-39.542114c0-9.213697 7.550112-16.763809 16.827793-16.763809h405.018746c9.341665 0 16.891777 7.550112 16.891777 16.763809v39.542114z m0-146.203449a16.827793 16.827793 0 0 1-16.891777 16.763809h-405.018746a16.827793 16.827793 0 0 1-16.827793-16.763809v-39.47813c0-9.277681 7.550112-16.827793 16.827793-16.827793h405.018746c9.341665 0 16.891777 7.550112 16.891777 16.827793v39.47813z m0-185.745563v39.542114a16.827793 16.827793 0 0 1-16.891777 16.763809h-405.018746a16.827793 16.827793 0 0 1-16.827793-16.763809v-39.542114c0-9.277681 7.550112-16.827793 16.827793-16.827793h405.018746a16.955761 16.955761 0 0 1 16.891777 16.827793z"
                    fill="#050a0e"
                    p-id="16935"
                  ></path>
                </svg>
              </div>
              <div class="name">{{ k.getFileName() }}</div>
              <div class="date">{{ getDate() }}</div>
              <div class="contentSize">{{ k.getFileSize() }}</div>
              <div class="doing">
                <button>删除文件</button>
                <button>查看文件</button>
              </div>
            </div>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
  import { Component, Vue, Prop } from 'vue-property-decorator';
  import group from '../../../../../script/file/group';
  import util from '../../../../../script/util';
  @Component({
    name: 'fileGroup',
    components: {},
  })
  export default class fileGroup extends Vue {
    currentLevel = 0;
    currentNode!: group;

    getDate(): string {
      return util.getNowDate();
    }
    @Prop() file!: group;
  }
</script>

<style scoped>
  .index-form {
    display: grid;
    grid-template-columns: 24px 256px 186px 72px 180px;
    grid-template-rows: auto;
  }
  .form {
    display: grid;
    grid-template-columns: 24px 256px 186px 72px 180px;
    grid-template-rows: auto;
  }
</style>
